/** @jsxImportSource @emotion/react */
import { jsx, css, SerializedStyles } from "@emotion/react";
import * as React from "react";
import theme from "../Theme";
import { storiesOf } from "@storybook/react";
import {DragablePinner} from "../Dragable";

function Demo(props: { mobileFullscreen?: boolean }) {
    const [isOpen, setIsOpen] = React.useState(true);
    const onPinnerHandler = React.useCallback(() => {
        setIsOpen(false);       //useCallback也没法解决onClosePinner实际会变动的问题，造成依赖+副作用的死循环。
    }, []);

  return (
    <div>
        <DragablePinner doing={isOpen} label={'到处拖拽它'}
                        onRequestPress={ onPinnerHandler }
        />
    </div>
  );
}


export const ModalStories = storiesOf("Dragable", module)
  .add("可拖拽组件", () => {
    return <Demo />;
  });

